<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<script type="text/javascript"
		src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script
		src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>


	<script type="text/javascript">

		var map;
		var G = google.maps;
		var geocoder;
		dojo.ready(initialize);
		function initialize() {
			geocoder = new google.maps.Geocoder();
			var latlng = new google.maps.LatLng(-22.54, -43.13);
			var myOptions = {
				zoom : 3,
				center : latlng,
				mapTypeId : google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map(dojo.byId("map_canvas"), myOptions);

		}

		function carregaDados(latitude, longitude) {
			var url = "/heatweet/tweet/carregatweets?q="
					+ dojo.byId("search").value + "&amp;r=500&amp;latitude=" + latitude
					+ "&amp;longitude=" + longitude;			
			dojo.xhrGet({
				url : url,
				load : function(response) {

						var layer = new google.maps.FusionTablesLayer({
							query : {
								select : 'Location',
								from : 2228772
							}

						});
						layer.setMap(map);
					

					

				}

			});

		}
		function codeAddress() {
			var address = dojo.byId("local").value;
			geocoder
					.geocode(
							{
								'address' : address
							},
							function(results, status) {
								if (status == google.maps.GeocoderStatus.OK) {									
									var latlng = results[0].geometry.location;
									var lat = latlng.toString().split(',')[0];
									lat = lat.substr(1);
									var lng = latlng.toString().split(',')[1];
									lng = lng.substr(1, lng.length - 2);
									carregaDados(lat, lng);
									var myOptions = {
											zoom : 6,
											center : results[0].geometry.location,
											mapTypeId : google.maps.MapTypeId.ROADMAP
										};
									map = new google.maps.Map(dojo.byId("map_canvas"), myOptions);
									var marker = new google.maps.Marker({
										map : map,
										position : results[0].geometry.location

									});
									

								} else {
									alert("Geocode was not successful for the following reason: "
											+ status);
								}
							});
		}
	</script>
	<title>HeaTweet</title>
</h:head>
<h:body>
	<h:form id="frm" prependId="false">
		<div>
			<h:outputText value="Busca" />
			<h:inputText required="true" id="search" />
			<h:outputText value="Local" />
			<h:inputText required="true" id="local" />
			<input type="button" value="procurar" onclick="codeAddress()" />

		</div>
		<div id="map_canvas" style="width: 100%; height: 600px;"></div>

	</h:form>
</h:body>
</html>
